<template>
    <view class="pb-safe-area">
        <view class="tab p-4">
            <view class="flex-1 bg-white rounded-4">
                <view class="flex">
                    <text class="flex-1 py-4 text-center h9" @tap="navClick(item)"
                        :class="item.scene == search.action ? 'text-primary font-weight-600' : ''"
                        v-for="(item, index) in navList" :key="index" :id="item.scene">{{ item.name }}</text>
                </view>
            </view>
        </view>
        <view class="p-4 flex flex-column grid-gap-4" v-if="list.length > 0">
            <view class="bg-white p-4 rounded-4 flex grid-gap-2" v-for="(item, index) in list" :key="index">
                <image :src="item.headimg" mode="scaleToFill" class="rounded-4" style="width: 60px;height: 60px;"
                    v-if="item.uid" />
                <view class="flex-1 flex flex-column grid-gap-2">
                    <view class="flex flex-y-center grid-gap-2">
                        <text class="text-primary font-weight-600 flex-1">({{ item.id }}){{ item.title }}</text>
                        <x-tag :type="item.state == 1 ? 'success' : 'danger'" v-if="item.uid">{{ item.state == 1 ? '正常'
                            : '冻结'
                            }}</x-tag>
                    </view>
                    <text class="h10 text-placeholder">{{ item.province }}{{ item.city }}{{ item.area }}{{ item.street
                        }}{{ item.address_detail }}</text>
                    <view class="flex grid-gap-2">
                        <text class="h10 text-placeholder">{{ item.nickname }}</text>
                        <text class="h10 font-weight-600" v-if="item.mobile">{{ item.mobile }}</text>
                    </view>
                    <view class="flex flex-x-flex-end">
                        <view class="btn-primary btn-round mx-0 flex flex-y-center grid-gap-2 px-4 py-1"
                            @tap="saveImage(item)">
                            <uni-icons type="cloud-download-filled" size="20" color="#FFFFFF" @tap=""></uni-icons>
                            <text class="h10 pb-1">二维码</text>
                        </view>
                    </view>
                </view>
            </view>
            <x-more :status="loading" @load="getList()"></x-more>
        </view>
        <view v-else class="vh-50 flex flex-center">
            <x-empty type="data" text="空空如也~"></x-empty>
        </view>
        <x-popup v-model="showQrcode" mode="center">
            <view class="flex flex-center py-4">
                <text class="font-weight-600">下载二维码</text>
            </view>
            <view class="p-4">
                <image :src="qrcode" mode="scaleToFill" style="width: 60vw;height: 60vw;" />
            </view>
            <view class="flex flex-center py-4">
                <text class="h10 text-placeholder">长按二维码保存到手机</text>
            </view>
        </x-popup>
    </view>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue';
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { $page, $api, $helper, $message } from '@/utils';
import { useWebConfigStore } from '@/stores';
const WebConfigStore = useWebConfigStore();
const search = ref({
    page: 1,
    action: 'empty',
});
const navList = ref([
    { name: '空码', scene: 'empty' },
    { name: '已入驻', scene: 'notempty' },
]);
const list = ref([]);
onLoad(() => {
    getList();
})
onReachBottom(() => {
    getList();
})
const loading = ref('loadmore');
const getList = () => {
    if (loading.value === 'loading' || loading.value === 'nomore') return;
    loading.value = 'loading';
    loading.value = 'loading';
    $api.Salesman.list(search.value).then((data: any) => {
        list.value = [...list.value, ...data.data];
        search.value.page++;
        if (data.current_page >= data.last_page) {
            nextTick(() => {
                loading.value = 'nomore';
            })
        }
    }).catch(() => {
        nextTick(() => {
            loading.value = 'nomore';
        })
    }).finally(() => {
        if (loading.value === 'loading') {
            loading.value = 'loadmore';
        }
    })
}
const navClick = (e: any) => {
    search.value.action = e.scene;
    list.value = [];
    search.value.page = 1;
    loading.value = 'loadmore';
    getList();
}
const showQrcode = ref(false);
const qrcode = ref('');
const saveImage = (item: any) => {
    // #ifdef H5
    showQrcode.value = true;
    qrcode.value = item.poster;
    // #endif
    // #ifndef H5
    uni.downloadFile({
        url: item.poster,
        success: (res: any) => {
            console.log(res);
            $helper.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                    $message.success('保存成功');
                },
                fail: () => {
                    $message.error('保存失败');
                }
            })
        },
        fail: () => {
            $message.error('保存失败');
        }
    })
    // #endif
}
</script>

<style lang="scss" scoped>
.tab {
    position: sticky;
    /* #ifdef H5 */
    top: var(--window-top);
    /* #endif */
    /* #ifndef H5 */
    top: 0;
    /* #endif */
    z-index: 999;
    background-color: $uni-bg-color-grey;

    &-body {
        height: 50px;
        line-height: 50px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 20px;

        &-item {
            padding: 0 10px;
            word-break: nowrap;
            white-space: nowrap;
        }
    }
}
</style>
